<style media="screen">
.head-container{
  position: relative;
  padding: 10px 0px 14px;
  margin:0 24px 0px;
  border-bottom: 1px solid #E3E3E5;
}
.head-container .mes{
  overflow: hidden;
  margin-right: 10px;
  float: left;
}
.head-container .mes p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .mes input{
  width: 200px;
  height: 34px;
}
.head-container .flow{
  float: left;
  margin-right: 10px;
}
.head-container .flow p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .flow .flow-select{
  width: 140px;
  height: 34px;
}
.head-container .button-group{
  padding-top: 23px;
}
.second-select .js-selected-q{
    margin-left: 0px;
    padding-left: 25px;
  }
  .third-select .js-selected-q{
    margin-left: 0px;
    padding-left: 50px;
  }
  .js-selected-q b{
    width: auto!important
  }
  .js-selected-project .js-selected-project-box .js-selected-q{
    background-position: 170px -30px;
  }
  .js-selected-project .js-selected-project-box div.active{
    background-position: 170px 26px;
  }
  .js-selected-project .js-selected-project-box .js-selected-q b{
    margin-left: 10px;
  }
  .second-select>li b{
    text-indent: 0em;
  }
  .first-select .ellipsis-1{
    min-width: 175px;
    max-width: 150px;
    padding-right: 45px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .second-select .ellipsis-1{
    min-width: 140px;
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .third-select b{
    min-width: 120px;
    max-width: 80px;
    padding-right: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
</style>

<section id="contract-list">
  <!-- 右边 -->
  <div class="js-selected-project ">
    <div class="css-pack-up"></div>
    <div class="js-selected-project-bg">
    </div>
    <div class="js-selected-project-box">
      <div class="select-project">
        <!--右侧公司-->
      </div>
    </div>
  </div>

  <hl-page-header title="整租合同" style="margin:0 24px;">
    <hl-button type="outline" @on-click="createContract" v-if="quanxian.indexOf('c32') > -1">新建合同</hl-button>
  </hl-page-header>

  <div class="head-container clearfix plr-24">
    <div class="clearfix">
      <div class="flow">
        <p>创建时间</p>
        <div class="pull-left">
          <web-calendar v-model="beginDate" :afterdate="endDate"  tips="起始时间" width="156" ></web-calendar>
        </div>
        <div class="pull-left line-height-34 color-999 plr-12">-</div>
        <div class="pull-left">
          <web-calendar v-model="endDate" :beforedate="beginDate"  tips="截止时间" width="156"></web-calendar>
        </div>
      </div>

      <div class="flow mr-10" >
        <p>信息检索</p>
        <div>
          <input type="text" :value="customer" class="global_ipt_text js-name-kh" placeholder="客户/合同名称/编号" v-model="customer" @keyup.enter="search">
        </div>
      </div>

      <div class="flow mr-10" v-if="policysData.indexOf('d2') > -1">
        <p>对接人</p>
        <div class="relative">
          <input type="text" class="global_ipt_text js-name-kh" placeholder="对接人/对接人联系方式" v-model="rperson.name" @input="onInputDJR" @blur="ifrpersonIds" @keyup.enter="search">
          <ul class="append-temp absolute bg-fff border z-998 line-height-34" style="left:0; top:35px; max-height:200px; overflow-y:scroll; width: 93%; text-indent:0.8em;" v-if="rperson.list.length > 0">
            <li v-for="item in rperson.list" :key="item.userId" class="clearfix" @click="setRperson(item.userName, item.userId)">
              <span class="pull-left">{{item.userName}}</span>
              <span class="pull-right">{{item.userPhone}}</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="button-group ml-24 pull-left">
        <hl-button @on-click="selectMenuList" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>
  </div>
  <!--审核状态-->
  <div class="global_screening_container" style="margin:0 24px">
    <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
    <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="left:580px"></span>
  </div>
  <!--流式布局表格-->
  <section class="fixed-config-table-container global_table" style="border:1px solid #E5E5E5;margin:0 24px;" @mouseenter="showScroll" @mouseleave="hideScroll">
    <!-- 内容表格 -->
    <div class="fixed-config-table-wrap" :class="{'config-table-scroll':isScroll}">
      <div :style="tbTitleWidth">
        <div class="config-table-title-wrap dy-flex">
          <div style="padding:0px;" class="config-table-title-item global_table_title" :class="{'dy-fx-1':item.name === '序','dy-fx-2':item.name !== '序'}"  v-if="item.isShow == 'Y'"  v-for="(item,index) in tbTitle" @click=" sortBySTTime(item,index)">
            <span>{{item.displayName ? item.displayName : item.name}}</span>
            <span class="bt-icon" v-if="item.isSort == 'Y'" :class="{'icon-Gm-sort-default':!rankType || rankType != item.value,'icon-Gm-sort-ascending':rankType == item.value && orders == 'ASC','icon-Gm-sort-descending':rankType == item.value && orders == 'DESC'}">
              <span class="path1"></span><i class="path2"></i>
            </span>
          </div>
        </div>

        <div class="config-table-content-wrap" >
          <ul class="dy-flex global_table_item" v-for="(item,index) in contract.contracts">
            <li :class="{'dy-fx-1':item1.name === '序','dy-fx-2':item1.name !== '序'}"  v-if="item1.isShow == 'Y'"  v-for="(item1,index1) in tbTitle" :title="(item1.value == 'name' || item1.value == 'customer' || item1.value == 'cCode' || item1.value == 'projectName')?item[item1.value]:''">
              <span v-if="item1.isShow == 'Y' && item1.value != 'signTime' &&  item1.value !== 'signTime' && item1.value !== 'beginDate' && item1.value !== 'endDate' && item1.value !== 'auditState' " >{{item[item1.value] | formatUndefined}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'signTime'" >{{item[item1.value] | formatDate}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'beginDate'" >{{item[item1.value] | formatDate}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'endDate'">{{item[item1.value] | formatDate}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'auditState'" >{{item[item1.value] | auditState}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- <div class="rent-content global_table" style="margin-right:123px;padding:0;">
      <table>
        <thead>
          <tr>
            <th style="padding:0px;" class="global_table_title"  v-if="item.isShow == 'Y'"  v-for="(item,index) in tbTitle"  @click=" sortBySTTime(item,index)">
              <span>{{item.displayName ? item.displayName : item.name}}</span>
              <span class="bt-icon" v-if="item.isSort == 'Y'" :class="{'icon-Gm-sort-default':!rankType || rankType != item.value,'icon-Gm-sort-ascending':rankType == item.value && orders == 'ASC','icon-Gm-sort-descending':rankType == item.value && orders == 'DESC'}">
                <span class="path1"></span><i class="path2"></i>
              </span>
            </th>
          </tr>
        </thead>

        <tbody class="config-table-content-wrap" >
          <tr class="global_table_item" v-for="(item,index) in contract.contracts">
            <td  v-if="item1.isShow == 'Y'"  v-for="(item1,index1) in tbTitle" :title="(item1.value == 'name' || item1.value == 'customer' || item1.value == 'cCode' || item1.value == 'projectName')?item[item1.value]:''">
              <span v-if="item1.isShow == 'Y' && item1.value != 'signTime' &&  item1.value !== 'signTime' && item1.value !== 'beginDate' && item1.value !== 'endDate' && item1.value !== 'auditState' " >{{item[item1.value] | formatUndefined}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'signTime'" >{{item[item1.value] | formatDate}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'beginDate'" >{{item[item1.value] | formatDate}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'endDate'">{{item[item1.value] | formatDate}}</span>
              <span v-if=" item1.isShow == 'Y' && item1.value == 'auditState'" >{{item[item1.value] | auditState}}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div> -->

    <!-- 操作 -->
    <div class="config-table-operate-wrap">
      <div class="title" style="backgroundColor:#F0F2FF;height:40px;">
        <div class="name">操作</div>
        <div class="extension-wrap">
          <i class="icon-predict-more extension-icon"></i>
        </div>
        <ul class="table-type-wrap">
          <li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
          <li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
          <li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span class="icon icon-Gm-edit" @click="showTableLayer"></span></li>
        </ul>
      </div>
      <ul class="button-group">
        <li v-for="(item,index) in contract.contracts" class="global_table_item">
          <a :href="'#/contractNewDeatil?id='+item.id + '&proId=' + item.projectId + '&version=' + item.version + '&ddtab=true'" target="_blank" :id="item.id">查看</a>
          <a v-show="item.auditState == 'CG' || item.auditState == 'RJ'" :id="item.id" :projectId="item.projectId" href="javascript:;" @click="submitContract(item.customer,item.beginDate,item.endDate,item.id,item.projectId)">提交</a>
					<a v-show="((item.auditState == 'PA' || item.auditState == 'EX') || (item.auditState == 'FN'? (item.withdrawFlag == 'N' && item.oldRenewFlag == 'N' ):false))  " v-if=" quanxian.indexOf('c121') > -1 "  @click="updateContract(item.id)">变更</a>


          <a v-show="(item.auditState == 'FN' || item.auditState == 'EX' || item.auditState == 'EN' || item.auditState == 'TE') && !item.flag" v-if="quanxian.indexOf('c200') > -1" @click="createRelet(item)">续租</a>
          <div class="relative inline contract-more-hover" v-if="item.flag">
            <div class="inline cursor ml-5 mr-5" style="color: #337ab7;">更多</div>
            <div class="absolute contract-more">
              <a v-show="(item.auditState == 'PA')" v-if="quanxian.indexOf('c290') > -1" @click="checkClose(item.id,item.version)">终止</a>
              <a v-show="(item.auditState == 'FN' || item.auditState == 'EX' || item.auditState == 'EN' || item.auditState == 'TE')" v-if="quanxian.indexOf('c200') > -1" @click="createRelet(item)">续租</a>
							<a v-show="(item.auditState == 'PA' || item.auditState == 'EX' || item.auditState == 'FN')" @click="checkWithout(item.id)"  target="_blank" :id="item.id" :projectId="item.projectId" v-if="quanxian.indexOf('c53') > -1">退租</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <div class="user-page pl-24 pr-24 ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{contract.totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pageLimits" v-model="limit" width="80" @on-change="updateLimit"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="search"></hl-pagination>
    </div>
  </div>

  <!--提交确认弹出层-->
  <div class="pop box-o-shadow contract-confirm-layer" v-show="isShowSubmitLayer">
    <div class="head-pop font-16"><span>提交审核</span>
      <button class="fw-close absolute close" type="button" @click="closeSubmitLayer">×</button>
    </div>
    <div class="content-pop">
      <div class="content text-center">是否确定提交
        <span> <i><</i>{{submitLayerData.companyName}}<i>></i> </span>
        <span class="color-orange">{{submitLayerData.beginDate}} 至 {{submitLayerData.endDate}} </span>的合同审核。
      </div>
    </div>
    <div class="fw-button">
      <button type="button" class="fw-submit yes" @click="confirmSubmitContract">确定提交</button>
      <button type="button" class="fw-submit no" @click="closeSubmitLayer">返回修改</button>
    </div>
  </div>
  <!-- 自定义列表项弹出层 -->
  <div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
    <div class="head-pop font-16"><span>自定义列</span>
      <button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
    </div>
    <div class="content-pop">
      <div class="content text-center">
        <ul class="title-wrap">
          <li class="dy-fx-1 text-left">名称</li>
          <li class="dy-fx-2">自定义名称</li>
          <li class="dy-fx-1">状态</li>
        </ul>
        <div class="ctx-wrap" id="sortableTable">
          <ul  :class="{ 'active': item.isActive == 'Y' }"  v-for="(item,index) in sortTableTitle" @mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
            <li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
            <li class="dy-fx-1 name">{{item.name}}</li>
            <li class="dy-fx-2">
              <input type="text" class="form-control" v-model="item.displayName">
            </li>
            <li class="dy-fx-1 ">
              <span class="show-icon " :class="{'icon-Nav-contract-choice':item.isShow == 'Y' , 'icon-uncheck':item.isShow == 'N' }" @click="selectedTitleItem(item,index)">显示</span>
              <span class="hide-icon " :class="{'icon-Nav-contract-choice':item.isShow == 'N' , 'icon-uncheck':item.isShow == 'Y' }" @click="cancelSelectedTitleItem(item,index)">隐藏</span>
            </li>
          </ul>

        </div>
      </div>
    </div>
    <div class="fw-button">
      <button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
      <button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
    </div>
  </div>


  <!--遮罩1-->
  <div class="backdrop" v-show="isShowSubmitLayer"></div>
  <div class="backdrop" v-show="isShowTableLayer"></div>
</section>

<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/contract/scripts/unit_contract_list.js" charset="utf-8"></script>

<style media="screen">
  .contract-more {
    left: -104px;
    top: 50%;
    transform: translate(0, -50%);
    background: #fff;
    width: 100px;
    line-height: 30px;
    z-index: 9;
    filter: drop-shadow(0px 0px 5px rgba(172,172,172,0.5));
    display: none;
  }
  .contract-more:before {
    content: '';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translate(0, -50%);
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }
  .contract-more a {
    display: block;
    border-bottom: 1px solid #ddd;
  }
  .contract-more a:last-child {
    border: 0;
  }
  .contract-more-hover:hover .contract-more {
    display: block;
  }
</style>
